<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '我的',
  },
}
</route>

<template>
  <view class="mine-page">
    <!-- 头部用户信息 -->
    <view class="user-header">
      <image
        class="avatar"
        :src="isLogined ? userInfo.avatar || defaultAvatar : defaultAvatar"
        mode="aspectFill"
      />
      <view class="user-info">
        <view class="user-name">
          <template v-if="isLogined">
            {{ userInfo.nickname || '用户' + userInfo.account }}
          </template>
          <view v-else @click="goSetting">未登录</view>
        </view>
        <view class="user-account" v-if="isLogined">账号：{{ userInfo.account }}</view>
      </view>
      <wd-icon name="setting" class="setting-icon" />
    </view>

    <!-- 我的服务卡片 -->
    <view class="service-card">
      <view class="service-title">我的服务</view>
      <view class="service-list">
        <view
          class="service-item"
          v-for="item in serviceList"
          :key="item.title"
          @click="item.onClick"
        >
          <wd-icon :name="item.icon" class="service-icon" />
          <view class="service-label">{{ item.title }}</view>
        </view>
      </view>
    </view>

    <!-- banner 区域 -->
    <view class="banner-list">
      <image
        v-for="(banner, idx) in banners"
        :key="idx"
        :src="banner"
        class="banner-img"
        mode="aspectFill"
      />
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { useUserStore } from '@/store/user'
const defaultAvatar = 'https://cdn.uviewui.com/uview/album/1.jpg'

const userStore = useUserStore()
const isLogined = computed(() => userStore.isLogined)
const userInfo = computed(() => userStore.userInfo || {})

// 用户信息（实际项目中应从 store 或接口获取）
const serviceList = [
  {
    title: '我的收藏',
    icon: 'heart',
    onClick: () => uni.showToast({ title: '我的收藏', icon: 'none' }),
  },
  {
    title: '个人设置',
    icon: 'user',
    onClick: () => uni.showToast({ title: '个人设置', icon: 'none' }),
  },
  {
    title: '联系客服',
    icon: 'user-circle',
    onClick: () => uni.showToast({ title: '联系客服', icon: 'none' }),
  },
  {
    title: '我的钱包',
    icon: 'wallet',
    onClick: () => uni.showToast({ title: '我的钱包', icon: 'none' }),
  },
]

const banners = [
  'https://img1.baidu.com/it/u=1234567890,1&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=300',
  'https://img2.baidu.com/it/u=987654321,2&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=300',
]

function goSetting() {
  if (!isLogined.value) {
    // 跳转到登录页
    uni.navigateTo({ url: '/pages/login/login' })
    return
  }
  uni.showToast({ title: '跳转设置', icon: 'none' })
}
</script>

<style lang="scss" scoped>
.mine-page {
  min-height: 100vh;
  padding-bottom: 20rpx;
  background: linear-gradient(180deg, #2196f3 0%, #2196f3 60%, #f5f7fa 100%);
}
.user-header {
  position: relative;
  display: flex;
  align-items: center;
  padding: 48rpx 32rpx 24rpx 32rpx;
  background: transparent;
}
.avatar {
  width: 110rpx;
  height: 110rpx;
  background: #fff;
  border: 4rpx solid #e0e0e0;
  border-radius: 50%;
  box-shadow: 0 4rpx 16rpx rgba(33, 150, 243, 0.08);
}
.user-info {
  flex: 1;
  margin-left: 28rpx;
}
.user-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
  letter-spacing: 1rpx;
}
.user-account {
  margin-top: 10rpx;
  font-size: 26rpx;
  color: #e0e0e0;
}
.setting-icon {
  position: absolute;
  top: 56rpx;
  right: 36rpx;
  font-size: 44rpx;
  color: #fff;
}
.service-card {
  padding: 36rpx 0 18rpx 0;
  margin: 0 24rpx;
  margin-top: 32rpx; // 原来是负值，改为正值，增加与头部的距离
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 8rpx 32rpx rgba(33, 150, 243, 0.1);
}
.service-title {
  margin-bottom: 24rpx;
  margin-left: 36rpx;
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}
.service-list {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 16rpx;
}
.service-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s;
}
.service-item:active {
  transform: scale(0.96);
}
.service-icon {
  margin-bottom: 10rpx;
  font-size: 52rpx;
  color: #2196f3;
}
.service-label {
  margin-top: 2rpx;
  font-size: 26rpx;
  color: #666;
}
.banner-list {
  display: flex;
  gap: 24rpx;
  margin: 36rpx 24rpx 0 24rpx;
}
.banner-img {
  width: 48%;
  height: 130rpx;
  object-fit: cover;
  border-radius: 18rpx;
  box-shadow: 0 4rpx 16rpx rgba(33, 150, 243, 0.08);
}
</style>
